<template>
  <div class="warning">
    <div class="conditions-div">
      <el-form ref="formRef" :model="formData" :inline="true">
        <el-form-item label="抓拍时间" prop="dateValue">
          <el-date-picker v-model="formData.dateValue" type="datetimerange" range-separator="一" start-placeholder="开始时间"
                          end-placeholder="结束时间" clearable>
          </el-date-picker>
        </el-form-item>
        <el-form-item label="任务" prop="taskIds">
          <el-select v-model="formData.taskIds" placeholder="请选择任务列表" clearable @change="taskChange">
            <el-option v-for="item in taskList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="摄像头" prop="cameraIds">
          <el-select v-model="formData.cameraIds" placeholder="请选择摄像头列表" clearable>
            <el-option v-for="item in cameraOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="float:right">
          <el-button type="primary" @click="clickSearch()">搜索</el-button>
          <el-button @click="resetClick('formRef')">重置</el-button>
          <!-- <el-button type="primary" icon="el-icon-map-location" @click="openMapClick">地图模式</el-button> -->
        </el-form-item>
      </el-form>
    </div>


    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="8" v-for="(item,index) in warningList" :key=index.time>
        <div style="background-color: #FFF;margin-bottom: 20px;border-radius: 2px;cursor: pointer;" @click="openTask(item)">
          <div style="height:40px;line-height:40px;display:flex;justify-content: space-between;border-bottom: 1px solid #F1F8FF;box-sizing: border-box;">
            <i>
              <i class="font-fourteen" style="font-weight: bold;color: #333333;margin-left: 20px">{{"十楼工位"}}</i>
            </i>
            <i style="font-weight: bold;color: #333333;margin-right: 20px;margin-left: 20px">{{item.time}}</i>
          </div>
          <div style="position: relative;">
            <div style="display: flex;align-items: center;height: 150px;margin-left: 30px;">
              <div style="width: 120px;height: 120px;background: #F1F6F9;">
                <img :src="item.cphoto" alt="目标图片" height="100%">
<!--                <canvas width=120 height=120 :ref="'warningImage'+index">-->
<!--                </canvas>-->
              </div>
              <!-- 可考虑用背景图 -->
              <div style="width: 120px;height: 120px;background: #F1F6F9;margin: 0 20px;text-align: center;">
                <img :src="item.rphoto" alt="目标图片" height="100%">
              </div>
              <div style="height: 120px;display: flex;flex-direction: column;justify-content: space-around;">
                <span><i>姓名：{{item.name}}</i></span>
                <span><i>性别：{{item.sex}}</i></span>
                <span><i>来源：{{item.libName}}</i></span>
                <span><i>相似度：</i><i style="font-size: 30px;font-weight: 600;color: #FF343E;font-family:Bahnschrift;">{{(item.xsd*1).toFixed(2)}}%</i></span>
              </div>
            </div>
            <div style="position: absolute;top:20px;right: 5px;">
              <img  src="../../../assets/img/warning/jk.png" alt="监控">
              <img v-if="item.taskType=='3'" src="../../../assets/img/warning/ts.png" alt="提示">
              <img v-if="item.taskType=='2'" src="../../../assets/img/warning/jk.png" alt="监控">
              <img v-if="item.taskType=='1'" src="../../../assets/img/warning/zb.png" alt="抓捕">
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 弹窗 任务详情 -->
    <task v-if="taskVisible" ref="task" @refreshTaskList></task>
    <!-- 地图详情 -->
    <warning-map ref="mapRef" @mapRefClick="mapRefClick"> </warning-map>
    <el-pagination style="margin-top:20px" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pageObj.page.pageNo"
                   :page-size="pageObj.page.pageSize" :page-sizes="[9, 12, 15, 18,21,24]"
                   layout="total,prev, pager, next, jumper,sizes"  :total="total">
    </el-pagination>
  </div>
</template>

<script>
import Task from './barrier-task'
import warningMap from './warning-map'
export default {
  name: "watch",
  data() {
    return {
      // 任务列表
      taskList: [],
      // 摄像头列表
      cameraOptions: [],
      formData: {
        // dateValue如果设置为null,点击重置后dateValue的值为[null];dateValue如果设置为[],点击重置后dateValue的值为[]
        dateValue: [],
        taskIds: "",
        cameraIds: "",
      },
      // 分页变量
      pageObj: {
        "cameraIds": [],
        "page": {
          "pageNo": 1,
          "pageSize": 9,
          "startTimestamp": null,
          "stopTimestamp": null,
        },
        taskIds: [],
      },
      total: 0,
      // 任务Id
      taskId: "",
      // 预警列表
      warningList:[],
      // this.$route.params.videoFaceList,
      // 详情
      taskVisible: false,
      val: {}
    }
  },
  components: {
    Task,
    warningMap
  },
  // activated
  created() {
    console.log("warninglist参数传递：")
    console.log(this.$route.params)
    // 第一次加载(非路由跳转)
    if (this.$route.params.taskId === undefined) {
      // 任务列表
      this.commonGetTaskList()
      // 预警列表
      this.getWarningList()
    }
    // 第一次加载(路由跳转，来自卡口)
    else if (this.$route.params.taskId === "") {
      // 任务列表
      this.commonGetTaskList()
      // 预警列表
      this.getWarningList()
    }
    // 第一次加载(路由跳转，来自布控)
    else {
      this.formData.taskIds = this.$route.params.taskId
      this.pageObj.taskIds = this.formData.taskIds.split()
      this.getWarningList()
      this.$http.post("/control/tasklist", {
        "pageNo": 1,
        "pageSize": 9999,
      }).then(res => {
        let taskList = res.data.data.records
        this.taskList = []
        taskList.forEach(item => {
          this.taskList.push({
            label: item.taskName,
            value: item.taskNo
          })
        })
        this.commonGetCameraList(this.formData.taskIds)
      })
    }
  },
  watch: {
    $route(to, from) {
      if ((from.name === "monitoring-barrier" || from.name === "monitoring-surveillance") && to.name ==
          "monitoring-warning") {

        this.formData = {
          dateValue: [],
          taskIds: "",
          cameraIds: "",
        }
        this.pageObj = {
          "cameraIds": [],
          "page": {
            "pageNo": 1,
            "pageSize": 9,
            "startTimestamp": null,
            "stopTimestamp": null,
          },
          taskIds: [],
        }
        this.cameraOptions = []
        // 非路由跳转
        if (this.$route.params.taskId === undefined) {
          return
        }
        // 路由跳转
        else {
          this.formData.taskIds = this.$route.params.taskId
          this.$http.post("/control/tasklist", {
            "pageNo": 1,
            "pageSize": 9999,
          }).then(res => {
            if (res.data.code == 0) {
              let taskList = res.data.data.records
              this.taskList = []
              taskList.forEach(item => {
                this.taskList.push({
                  label: item.taskName,
                  value: item.taskNo
                })
              })
              this.commonGetCameraList(this.formData.taskIds)
              let dateArr = this.formData.dateValue
              if (dateArr != null && dateArr.length != 0) {
                let startDate = dateArr[0].getTime()
                let endDate = dateArr[1].getTime()
                this.pageObj.page.pageNo = 1
                this.pageObj.page.startTimestamp = startDate
                this.pageObj.page.stopTimestamp = endDate
              }
              if (this.formData.taskIds != "") {
                this.pageObj.page.pageNo = 1
                this.pageObj.taskIds = this.formData.taskIds.split()
                if (this.formData.cameraIds != "") {
                  this.pageObj.page.pageNo = 1
                  this.pageObj.cameraIds = this.formData.cameraIds.split()
                } else {
                  this.pageObj.cameraIds = []
                }
              } else {
                this.pageObj.taskIds = []
              }
              this.getWarningList()
            }
          })
        }
      }
    }
  },
  methods: {
    // 打开单个预警信息
    openTask(val) {
      this.taskVisible = true
      this.$nextTick(() => {
        this.$refs.task.init(JSON.stringify(val))
      })
    },
    // 搜索
    clickSearch() {
      let dateArr = this.formData.dateValue
      if (dateArr == null || dateArr.length == 0) {
        this.pageObj.page.startTimestamp = null
        this.pageObj.page.stopTimestamp = null
        this.pageObj.page.pageNo = 1
      } else if (dateArr.length != 0) {
        let startDate = dateArr[0].getTime()
        let endDate = dateArr[1].getTime()
        this.pageObj.page.pageNo = 1
        this.pageObj.page.startTimestamp = startDate
        this.pageObj.page.stopTimestamp = endDate
      }
      if (this.formData.taskIds != "") {
        this.pageObj.page.pageNo = 1
        this.pageObj.taskIds = this.formData.taskIds.split()
        // if (this.formData.cameraIds != "") {
        // 	this.pageObj.page.pageNo = 1
        // 	this.pageObj.cameraIds = this.formData.cameraIds.split()
        // } else {
        // 	this.pageObj.cameraIds = []
        // }
      } else {
        this.pageObj.taskIds = []
      }
      if (this.formData.cameraIds != "") {
        this.pageObj.page.pageNo = 1
        this.pageObj.cameraIds = this.formData.cameraIds.split()
      } else {
        this.pageObj.cameraIds = []
      }
      this.getWarningList()
    },
    // 页码
    // el-pagination
    handleSizeChange: function(pageSize) {
      this.pageObj.page.pageSize = pageSize
      this.handleCurrentChange(this.pageObj.page.pageNo);
    },
    handleCurrentChange(val) {
      this.pageObj.page.pageNo = val
      let dateArr = this.formData.dateValue
      if (dateArr == null || dateArr.length == 0) {
        this.pageObj.page.startTimestamp = null
        this.pageObj.page.stopTimestamp = null
      } else if (dateArr.length != 0) {
        let startDate = dateArr[0].getTime()
        let endDate = dateArr[1].getTime()
        this.pageObj.page.startTimestamp = startDate
        this.pageObj.page.stopTimestamp = endDate
      }
      if (this.formData.taskIds != "") {
        this.pageObj.taskIds = this.formData.taskIds.split()
        // if (this.formData.cameraIds != "") {
        // 	this.pageObj.cameraIds = this.formData.cameraIds.split()
        // } else {
        // 	this.pageObj.cameraIds = []
        // }
      } else {
        this.pageObj.taskIds = []
      }
      if (this.formData.cameraIds != "") {
        this.pageObj.cameraIds = this.formData.cameraIds.split()
      } else {
        this.pageObj.cameraIds = []
      }
      this.getWarningList()
    },
    // 表单重置
    resetClick(rueleName) {
      this.$refs[rueleName].resetFields()
    },
    // 切换任务
    taskChange() {
      this.cameraOptions = []
      this.formData.cameraIds = ""
      if (this.formData.taskIds != "") {
        this.commonGetCameraList(this.formData.taskIds)
      }
    },
    // 获取预警列表
    getWarningList(obj = this.pageObj) {
      this.$http.post("/warning/alarm", obj).then(res => {
        if (res.data.code === 0) {
          let warningList = res.data.data.records
          this.warningList = warningList
          this.total = Number(res.data.data.total);
          this.warningList.forEach((item, index, arr) => {
            this.$nextTick(() => {
              let canvas = this.$refs[`warningImage${index}`][0]
              let cxt = canvas.getContext("2d");
              cxt.clearRect(0, 0, 120, 120);
              let img = new Image();
              img.src = item.bgImg;
              img.onload = function() {
                cxt.drawImage(img, item.positionVO.x, item.positionVO.y, item.positionVO.w, item.positionVO.h, 0, 0,
                    120,
                    120);
              }
            })
          })
        }
      })
    },
    // 获取任务列表
    commonGetTaskList() {
      this.$http.post("/control/tasklist", {
        "pageNo": 1,
        "pageSize": 9999,
      }).then(res => {
        if (res.data.code == 0) {
          this.taskList = []
          let taskList = res.data.data.records
          taskList.forEach(item => {
            this.taskList.push({
              label: item.taskName,
              value: item.taskNo
            })
          })
        }
      })
    },
    // 获取摄像头列表
    commonGetCameraList(taskId) {
      this.$http.get(`/control/gettaskcamera/${taskId}`).then(res => {
        console.log(res)
        if (res.data.code == 0) {
          let cameraList = res.data.data
          cameraList.forEach(item => {
            this.cameraOptions.push({
              label: item.cameraName,
              value: item.idFaceCamera
            })
          })
        }
      })
    },
    // 预警地图模式
    openMapClick() {
      this.$nextTick(() => {
        this.$refs.mapRef.init()
      })
    },
    // 地图模式回调
    mapRefClick() {}
  },
}
</script>

<style scoped>
i {
  font-style: normal;
  font-family: "Noto Sans SC";
}

.conditions-div {
  background-color: #FFF;
  border-radius: 2px;
}

.conditions-div>>>.el-form-item {
  margin: 10px
}
</style>
